<script setup>
import Chart from "../components/chart.vue";
import Chart2 from "../components/chart+.vue";

const option = ref({
	title: {
		text: "Traffic Sources",
		left: "center",
	},
	tooltip: {
		trigger: "item",
		formatter: "{a} <br/>{b} : {c} ({d}%)",
	},
	legend: {
		orient: "vertical",
		left: "left",
		data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"],
	},
	series: [
		{
			name: "Traffic Sources",
			type: "pie",
			radius: "55%",
			center: ["50%", "60%"],
			data: [
				{ value: 335, name: "Direct" },
				{ value: 310, name: "Email" },
				{ value: 234, name: "Ad Networks" },
				{ value: 135, name: "Video Ads" },
				{ value: 1548, name: "Search Engines" },
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: "rgba(0, 0, 0, 0.5)",
				},
			},
		},
	],
});
</script>

<template>
	<Chart :data="[32, 43, 21, 45]" />
	<Chart2 :option="option" height="300px" width="400px" />
</template>
